<template>
  <main id="app-container" class="flex flex-ai-c flex-js-c">
    <Particles id="particles" style="height: 100%;width: 100%;position: absolute;" :options="config"></Particles>
    <section class="from">
      <h2 class="text-white flex flex-js-c" style="margin-bottom: 20px">后台管理系统</h2>
      <el-form ref="form" :model="temp" >
        <el-form-item>
          <el-input
              prefix-icon="el-icon-user-solid"
              v-model="temp.username"
              name="username"
              autocomplete="on"
              placeholder="请输入用户名"
              @keyup.enter="loginCommit">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              placeholder="请输入内容"
              :type="psType"
              name="password"
              v-model="temp.password"
              @keyup.enter="loginCommit">
          >
            <template #prefix>
              <svg-icon class-name="lock" :iconName="'lock'"></svg-icon>
            </template>
            <template #suffix>
              <svg-icon
                  class-name="eye cursor-pointer"
                  :iconName="psType ? 'eye-close': 'eye-open'"
                  @click="changePsType">
              </svg-icon>
            </template>
          </el-input>
        </el-form-item>
        <div class="flex flex-js-c">
          <el-button
              type="primary"
              :loading="loading"
              class="button-xl"
              @click="loginCommit">
              登录
          </el-button>
        </div>
      </el-form>
    </section>
  </main>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { useStore } from 'vuex';
import { LoginStandard } from '@/common/SDK/interface';
import Auth from '@/common/SDK/Auth';
import { config } from '@/plugs/particle';
export default defineComponent({
  name: "login",
  setup() {
    /*获取当前vue的实例*/
    const { proxy }:any = getCurrentInstance();
    /*获取vuex实例*/
    const store = useStore();
    /*密码是否隐藏*/
    const psType = ref<string>('password')
    /*加载显示*/
    const loading = ref<boolean>(false);
    /*表单*/
    const temp = reactive<LoginStandard>({
      username: store.state.user.userInfo?.userName || '',
      password: ''
    })

    /*挂载生命周期*/
    onMounted(()=>{
      config["background"].color = store.getters.themeColor.MAIN_COLOR
    })

    /*密码显示*/
    const changePsType = ():void => {
      psType.value = psType.value ? '' : 'password'
    }

    /*表单登录*/
    const loginCommit = ():void => {
      loading.value = true;
      proxy.$refs.form.validate((valid:boolean)=>{
        if(!valid) return console.error("提交错误");
        Auth.login((res:any)=>{
          loading.value = false;
          const userInfo = {
            token: 2,
            expire: 222222222222222222222,
            name: temp.username,
          }
          store.dispatch('user/login',userInfo);
          store.dispatch('user/changeRoles');
          if(!res) return;

        },temp)
      })
    }

    return {
      temp,
      loading,
      loginCommit,
      changePsType,
      config,
      psType
    }
  }
})
</script>

<style scoped lang="scss">
.from {
  width: 400px;
  position: absolute;
  .lock {
    vertical-align: -0.15em;
    margin-left: 5px;
  }
  /*眼睛图标*/
  .eye {
    vertical-align: -0.2em;
    margin-right: 5px;
  }
}
</style>
